<template>
  <div>
    <vue-particles
        id="particles-js"
        color="#114514"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="8"
        linesColor="#409EFF"
        :linesWidth="2"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi">
    </vue-particles>
    <el-form :model="formLogin" :rules="rules" ref="formLogin" class="login-bok">
      <el-form-item prop="username">
        <el-input v-model="formLogin.name" placeholder="账号">
          <i slot="prepend" class="el-icon-s-custom"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="formLogin.password" type="password" show-password placeholder="密码">
          <i slot="prepend" class="el-icon-lock"/>
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-row :span="24">
          <el-col :span="12">
            <el-input v-model="formLogin.code" auto-complete="off" placeholder="请输入验证码" size=""
                      @keyup.enter="loginByNameAndPwd()"></el-input>
          </el-col>
          <el-col :span="12">
            <div class="login-code" @click="refreshCode">
              <!--验证码组件-->
              <s-identify :identifyCode="identifyCode"></s-identify>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="loginByNameAndPwd()" style="margin-left: auto;width: 30%"
                     @keyup.enter="loginByNameAndPwd()">登 录
          </el-button>
          <el-button type="success" @click="toRegsiter()" style="margin-left: 27%;width: 30%">注 册</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-dialog title="用户注册"
               :visible.sync="registerdialogFormVisible"
               :append-to-body="true"
               @close="editDialogClosed"
               style="width: 60%;margin-left: 20%">
      <el-form :model="registerform" :rules="registerrules" ref="registerform" :label-position="labelPosition">
        <el-form-item label="头  像" required>
          <el-upload style="margin-left: 35%"
                     class="avatar-uploader"
                     action="http://localhost:8080/upload" :show-file-list="false" :on-success="imgSeccess"
                     accept=".png,.jpg,.jpeg">
            <img style="margin-left: 10px" v-model="registerform.image" v-if="registerform.image"
                 :src="registerform.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="账  号" required>
          <el-input v-model="registerform.name" style="width: 80%;margin-left: 10px"
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="姓  名" required>
          <el-input v-model="registerform.actualname" style="width: 80%;margin-left: 10px"
                    placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="密  码" required>
          <el-input type="password" v-model="registerform.password" style="width: 80%;margin-left:10px " show-password
                    placeholder="请输入用户密码"></el-input>
        </el-form-item>
        <el-form-item label="电  话" required>
          <el-input v-model="registerform.phone" style="width: 80%;margin-left: 10px" placeholder="请输入电话"
                    required/>
        </el-form-item>
        <el-form-item label="邮  箱" required>
          <el-input v-model="registerform.email" style="width: 80%;margin-left: 10px" placeholder="请输入邮箱"
                    required/>
        </el-form-item>
        <el-form-item label="地  址" required>
          <el-cascader style="width: 80%;margin-left: 10px" required
                       size="large"
                       :options="pcaTextArr"
                       :v-model="registerform.selectedOptions"
                       v-model="registerform.address"
                       placeholder="点击此处选择地址"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleRegister">确 定</el-button>
        <el-button @click="registerdialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script src="./login.js"></script>
<style src="./login.css"></style>